<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" %>
<div class="layui-header">
	<!--顶部导航条-->
	<div class="layui-logo layui-hide-xs"
		 style="width:500px;"><img src="${ctx}/static/images/sys_logo.png"></div>
	<!-- 头部区域（可配合layui 已有的水平导航） -->

	<ul class="layui-nav" style="text-align: center">
		<p id="clock" style="color: #ffffff;line-height: 60px;">
			<span id="date"></span>
			<span id="time"></span>&nbsp;
			<span id="week"></span>
		</p>
	</ul>

	<ul class="layui-nav layui-layout-right">
		<li class="layui-nav-item layui-hide layui-show-md-inline-block">
			<a href="javascript:;">
				<c:choose>
					<c:when test="${sessionScope.academic.name==null}">
						<a href="${ctx}/login.jsp">未登录</a>
					</c:when>
					<c:when test="${sessionScope.academic.name!=null}">
						<img src="${ctx}/static/images/teacher.png" class="layui-nav-img">
						<span>${sessionScope.academic.name}</span>
					</c:when>
				</c:choose>
			</a>
			<c:if test="${sessionScope.academic.name!=null}">
				<dl class="layui-nav-child">
					<dd><a class="layui-icon layui-icon-username" id="personInfo" style="font-size: 16px; cursor: pointer;">&nbsp;个人信息</a></dd>
					<dd><a class="layui-icon layui-icon-set" id="editPassword" style="font-size: 16px; cursor: pointer;">&nbsp;修改密码</a>
					</dd>
					<dd><a class="layui-icon layui-icon-logout" href="${ctx}/logout.action" style="font-size: 16px;">&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</a>
					</dd>
				</dl>
			</c:if>
		</li>
		<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
			<a href="javascript:;">
				<i class="layui-icon layui-icon-more-vertical"></i>
			</a>
		</li>
	</ul>
</div>

<%--弹出层--%>
<form class="layui-form" id="edit_form" style="display:none; margin-top: 16px">
	<div class="layui-form-item">
		<label class="layui-form-label mylabel">工号</label>
		<div class="layui-input-block">
			<input type="text" name="jobNo" id="jobNo" readonly="readonly" placeholder="请输入教师工号"
				   class="layui-input layui-disabled" style="width: 350px;">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label mylabel">姓名</label>
		<div class="layui-input-block">
			<input type="text" name="name" id="name" placeholder="请输入教师姓名" class="layui-input" style="width: 350px;">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label mylabel">性别</label>
		<div class="layui-input-block">
			<input type="radio" name="sex" id="b" checked value="男" title="男">
			<input type="radio" name="sex" id="g" value="女" title="女">
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label mylabel">年龄</label>
			<div class="layui-input-block">
				<input type="text" name="age" id="age" placeholder="请输入教师年龄(选填)" class="layui-input"
					   style="width: 350px;">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label mylabel">所属系</label>
			<div class="layui-input-block">
				<input type="text" name="department" readonly="readonly" value="计算机系" class="layui-input layui-disabled"
					   style="width: 350px;">
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label mylabel">电话</label>
			<div class="layui-input-block">
				<input type="text" name="phone" id="phone" placeholder="请输入教师的联系电话" class="layui-input"
					   style="width: 350px;">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label mylabel">电子邮箱</label>
			<div class="layui-input-block">
				<input type="text" name="email" id="email" class="layui-input" style="width: 350px;">
			</div>
		</div>
	</div>
	<div style="float: right;margin-right: 40px">
		<div class="layui-input-block">
			<button type="button" id="btn" class="layui-btn layui-btn-normal">修改</button>
			<button type="button" id="btnClose" class="layui-btn layui-btn-primary">关闭</button>
		</div>
	</div>
</form>

<form class="layui-form" id="password_form" style="display:none; margin-top: 16px">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label mylabel">新密码</label>
			<div class="layui-input-block">
				<input type="text" name="password" id="password" class="layui-input" style="width: 200px;">
			</div>
		</div>
	</div>
	<div style="float: right;margin-right: 40px">
		<div class="layui-input-block">
			<button type="button" id="btn1" class="layui-btn layui-btn-normal">确认</button>
			<button type="button" id="btnClose1" class="layui-btn layui-btn-primary">关闭</button>
		</div>
	</div>
</form>

<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/layui/layui.js" charset="utf-8"></script>
<script src="${ctx}/static/js/index.js"></script>
<script>

	window.onload = function setTime() {
		getTime();
		setInterval(() => {
			getTime();
		}, 1000);
	};

	function getTime() {
		let weeks = ["星期日","星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

		let dt = new Date();
		let date = dt.getFullYear() + "年" + (dt.getMonth() + 1) + "月" + dt.getDate() + "日";
		document.getElementById("date").innerHTML = date;

		let hours = dt.getHours();
		if (hours<10) {
			hours="0"+hours;
		}
		let minutes = dt.getMinutes();
		if (minutes<10) {
			minutes="0"+minutes;
		}
		let second = dt.getSeconds();
		if (second<10) {
			second = "0"+second;
		}
		let time = hours + ":" + minutes +":"+second;
		document.getElementById("time").innerHTML = time;

		let week = weeks[dt.getDay()];
		document.getElementById("week").innerHTML = week;
	}

	layui.use(['layer', 'jquery', 'form'],function () {
		let layer = layui.layer,
				$ = layui.$,
				form = layui.form;

		$("#personInfo").on("click", function () {
			layer.open({
				type: 1,
				area: ['500px', '520px'],
				title: '个人信息',
				content: $("#edit_form"),
				shade: 0,
				cancel: function (index) {
					layer.closeAll();
				}
			});
			$.ajax({
				url: "${ctx}/academic/getPersonInfo.action",
				type: "post",
				success: function (data) {
					//console.log(data);
					let academic = data.academic;
					$("#jobNo").val(academic.jobNo);
					$("#name").val(academic.name);
					$("#age").val(academic.age);
					if (academic.sex != "男") {
						$("#b").removeAttr("checked");
						$("#g").attr("checked", true);
					} else {
						$("#g").removeAttr("checked");
						$("#b").attr("checked", true);
					}
					$("#department").val(academic.department);
					$("#email").val(academic.email);
					$("#phone").val(academic.phone);
					form.render();
				}
			});
		});

		$("#btn").on("click", function () {
			if ($("#jobNo").val() == "") {
				layer.msg("工号不允许为空");
				return;
			} else if (!/^\d{4}$/.test($("#jobNo").val())) {
				layer.msg("工号格式不正确");
				return;
			} else if ($("#name").val() == "") {
				layer.msg("姓名不允许为空");
				return;
			} else if (!/^[\u4e00-\u9fa5]{2,6}$/.test($("#name").val())) {
				layer.msg("只能输入中文名字");
				return;
			} else if ($("#phone").val() == "") {
				layer.msg("电话号码不允许为空");
				return;
			} else if (!/^1[3|4|5|7|8][0-9]{9}$/.test($("#phone").val())) {
				layer.msg("电话号码格式不正确");
				return;
			} else if ($("#email").val()!="") {
				if (!/^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test($("#email").val())) {
					layer.msg("邮箱格式不正确");
					return;
				}
				layer.confirm("确定要提交吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
					$.ajax({
						type: "post",
						url: "${ctx}/academic/updatePerson.action",
						data: $("#edit_form").serialize(),
						dataType: "json",
						contentType: "application/x-www-form-urlencoded",
						success: function (data) {
							console.log(data);
							if (data.flag) {
								layer.msg("修改成功");
								setTimeout(() => {
									window.location.reload();
								}, 1500);
							} else {
								layer.msg("修改失败");
							}
						},
						error: function () {
							layer.msg("请求失败");
						}
					});
					layer.closeAll('dialog');
				});
			}
		});

		$("#editPassword").on("click",function () {
			layer.open({
				type: 1,
				area: ['350px', '180px'],
				title: '修改密码',
				content: $("#password_form"),
				shade: 0,
				cancel: function (index) {
					layer.closeAll();
				}
			});
		});

		$("#btn1").on("click", function () {
			if ($("#password").val()=="") {
				layer.msg("密码不能为空");
				return;
			} else {
				layer.confirm("确定要修改吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
					$.ajax({
						type: "post",
						url: "${ctx}/updatePassword.action",
						data: {password: $("#password").val()},
						dataType: "json",
						contentType: "application/x-www-form-urlencoded",
						success: function (data) {
							if (data.flag) {
								layer.msg("修改成功");
								setTimeout(() => {
									window.location.reload();
								}, 1500);
							} else {
								layer.msg("修改失败");
							}
						},
						error: function () {
							layer.msg("请求失败");
						}
					});
					layer.closeAll('dialog');
				});
			}
		});

		$("#btnClose").on("click", function (index) {
			layer.closeAll();
		});

		$("#btnClose1").on("click", function (index) {
			layer.closeAll();
		});
	});
</script>